<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorate="~{layout/default}">
<head>
    <meta charset="UTF-8">
    <title>帝一流</title>
    <link th:href="@{/static/plugin/bootstrap-table/bootstrap-table.css}" type="text/css" rel="stylesheet">
    <link th:href="@{/static/plugin/treeview/dhtmlxtreeview.css}" type="text/css" rel="stylesheet">
</head>
<body>
<div layout:fragment="cm-flex" class="cm-flex">
    <div class="cm-breadcrumb-container">
        <ol class="breadcrumb">
            <li><a href="#">系统管理</a></li>
            <li class="active">角色管理</li>
        </ol>
    </div>
    <form id="cm-search" action="index.html" method="get">
        <input type="search" name="q" autocomplete="off" placeholder="Search...">
    </form>
</div>
<div layout:fragment="content" class="container-fluid">
    <div class="panel panel-default">
        <div class="panel-body auto-height">
            <div class="btn-group" role="group" id="toolbar">
                <button type="button" class="btn btn-default" id="addRole"><i class="fa fa-fw fa-plus"></i></button>
                <button type="button" class="btn btn-default" id="editRole"><i class="fa fa-fw fa-pencil"></i></button>
                <button type="button" class="btn btn-default" id="delRole"><i class="fa fa-fw fa-trash-o"></i></button>
            </div>
            <table id="roleTable"></table>
        </div>
    </div>
</div>
<div layout:fragment="myJs">
    <div id="roleModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
                    <h5 class="modal-title" id="roleModalTitle">
                        添加角色
                    </h5>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="roleForm">
                        <input type="hidden" id="id" name="id">
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">角色名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="name" name="name" placeholder="角色名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="code" class="col-sm-2 control-label">角色代码</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="code" name="code" placeholder="角色代码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="comment" class="col-sm-2 control-label">角色描述</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" name="comment" id="comment" rows="3"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveRole">保存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div id="menuModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
                    <h5 class="modal-title">
                        授权角色
                    </h5>
                </div>
                <div class="modal-body">
                    <div id="menuTree" class="modal-tree"></div>
                    <input type="hidden" name="roleId" id="roleId">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveMenu">保存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <script th:src="@{/static/plugin/bootstrap-table/bootstrap-table.js}"></script>
    <script th:src="@{/static/plugin/bootstrap-table/bootstrap-table-locale-all.js}"></script>
    <script th:src="@{/static/plugin/treeview/dhtmlxtreeview.min.js}"></script>
    <script th:inline="javascript">
        $(function () {
            var autoHeight = $("div.auto-height").height();
            var tableHeight = autoHeight - 0;

            var $table = $('#roleTable');
            $table.bootstrapTable({
                height: tableHeight,
                sidePagination: 'server',
                url: /*[[@{/sys/roleList}]]*/,
                method: 'post',
                toolbar: '#toolbar',
                // 条纹
                striped: true,
                columns: [
                    {
                        field: 'ck',
                        checkbox: true
                    },
                    {
                        field: 'name',
                        title: '角色名称'
                    },
                    {
                        field: 'code',
                        title: '角色代码',
                        align: 'center',
                    },
                    {
                        field: 'comment',
                        title: '角色描述'
                    },
                    {
                        field: 'createUser',
                        title: '创建人'
                    },
                    {
                        field: 'createTime',
                        title: '创建时间',
                        align: 'center',
                    },
                    {
                        field: '',
                        title: '授权',
                        align: 'center',
                        formatter: function (value, row, index) {
                            return '<a href="#menuModal" data-toggle="modal" data-id="' + row.id + '"><span class="sf-wrench-screwdriver" style="display: inline-block;' +
                                'width: 16px;height: 16px;background-size: 16px 16px;"></span></a>';
                        }
                    }
                ]
            });

            $('#addRole').on('click', function () {
                $('#roleForm')[0].reset();
                $('#id').val('');

                $('#roleModalTitle').html('添加角色');
                $('#roleModal').modal('show');
            });

            $('#saveRole').on('click', function () {
                var param = $('#roleForm').serialize();
                $.ajax({
                    type: $('#id').val() == ''? 'post': 'put',
                    url: /*[[@{/sys/role}]]*/,
                    data: param,
                    dataType: "json",
                    success: function (result) {
                        if (result == 1) {
                            $('#roleModal').modal('hide');
                            $('#roleTable').bootstrapTable('refresh');

                            alertTip('success', '保存成功');
                        } else {
                            alertTip('error', '保存失败');
                        }
                    }
                });
            });

            $('#editRole').on('click', function () {
                var roles = $table.bootstrapTable('getSelections');
                if (roles.length != 1){
                    swal("请选择一个角色进行修改!");

                    return;
                }
                $('#roleForm')[0].reset();

                var role = roles[0];
                $('#id').val(role['id']);
                $('#name').val(role['name']);
                $('#code').val(role['code']);
                $('#comment').val(role['comment']);

                $('#roleModalTitle').html('修改角色');
                $('#roleModal').modal('show');
            });

            $('#delRole').on('click', function () {
                var roles = $table.bootstrapTable('getSelections');
                if (roles.length < 1){
                    swal("请至少选择一个角色进行删除!");

                    return;
                }
                // 提示
                swal({
                        title: "确定删除选中角色?",
                        text: "删除后将无法恢复",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#e67e22",
                        confirmButtonText: "删除",
                        closeOnConfirm: true
                    },
                    function(){
                        var idArr = [];
                        for (var i = 0; i < roles.length; i++){
                            idArr[i] = roles[i]['id'];
                        }
                        $.ajax({
                            type: 'delete',
                            url: /*[[@{/sys/role}]]*/,
                            contentType:"application/json;charset=utf-8",
                            data: JSON.stringify(idArr),
                            dataType: "json",
                            success: function (result) {
                                if (result == 1) {
                                    $('#roleModal').modal('hide');
                                    $('#roleTable').bootstrapTable('refresh');

                                    alertTip('success', '删除成功');
                                } else {
                                    alertTip('error', '删除失败');
                                }
                            }
                        });
                    });
            });

            var myTreeView;
            $('#menuModal').on('show.bs.modal', function (event) {
                var aObj = $(event.relatedTarget);
                var roleId = aObj.data('id');
                $('#roleId').val(roleId);

                var path = /*[[@{/sys/assetTree/}]]*/;
                myTreeView = new dhtmlXTreeView({
                    parent: "menuTree",
                    checkboxes: true,
                    json: path + roleId,
                });
            });

            $('#saveMenu').on('click', function () {
                var roleId = $('#roleId').val();
                var assetArr = myTreeView.getAllChecked();

                var dataArr = [];
                for (var i = 0; i < assetArr.length; i++){
                    var id = assetArr[i];

                    var obj = {};
                    obj.master = 'role';
                    obj.masterValue = roleId;
                    obj.accessValue = id;
                    obj.access = myTreeView.getUserData(id, 'access');
                    obj.permission = myTreeView.getUserData(id, 'permission');

                    dataArr[i] = obj;
                }

                $.ajax({
                    type: "post",
                    url: /*[[@{/sys/roleAsset}]]*/,
                    contentType:"application/json;charset=utf-8",
                    data: JSON.stringify(dataArr),
                    dataType: "json",
                    success: function (result) {
                        if (result == 1) {
                            $('#menuModal').modal('hide');
                            $('#roleTable').bootstrapTable('refresh');

                            alertTip('success', '保存成功');
                        } else {
                            alertTip('error', '保存失败');
                        }
                    }
                });
            });
        });
    </script>
</div>
</body>
</html>